<template>
  <el-dialog
    v-model="visible"
    :title="`敏感词 [${keyword}] 的触发记录`"
    width="80%"
    @closed="handleClose"
  >
    <el-table :data="recordList" border v-loading="loading" style="width: 100%">
      <el-table-column prop="content" label="消息内容" show-overflow-tooltip>
        <template #default="{ row }">
          <div style="white-space: pre-wrap">{{ row.content }}</div>
        </template>
      </el-table-column>
      <el-table-column label="发送人">
        <template #default="{ row }">
          <div class="user-info">
            <el-row>
              <el-col :span="24" style="display: flex; align-items: center">
                <el-avatar :size="32" :src="row.fromAvatar" />
                <span class="user-name">{{ row.fromName }}</span>
                <el-tag
                  size="small"
                  :type="row.fromType === 3 ? 'warning' : 'info'"
                >
                  {{ row.fromType === 3 ? "客服" : "用户" }}
                </el-tag>
              </el-col>
              <el-col :span="24">
                <el-tag size="small" type="info"
                  >用户ID: {{ row.fromUserId }}</el-tag
                >
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="接收人">
        <template #default="{ row }">
          <div class="user-info">
            <el-row>
              <el-col :span="24" style="display: flex; align-items: center">
                <el-avatar :size="32" :src="row.toAvatar" />
                <span class="user-name">{{ row.toName }}</span>
                <el-tag
                  size="small"
                  :type="row.toType === '3' ? 'warning' : 'info'"
                >
                  {{ row.toType === "3" ? "客服" : "用户" }}
                </el-tag>
              </el-col>
              <el-col :span="24">
                <el-tag size="small" type="info"
                  >用户ID: {{ row.toUserId }}</el-tag
                >
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="消息时间" width="150px" />
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.page"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="loadRecordList"
        layout="total, prev, pager, next"
      />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { getMessageSensitiveWordList } from "@/api/message";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  keyword: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:modelValue"]);

const visible = ref(false);
const loading = ref(false);
const recordList = ref([]);

// 分页参数
const pagination = ref({
  page: 1,
  pageSize: 10,
  total: 0,
});

// 监听visible变化
watch(
  () => props.modelValue,
  (val) => {
    visible.value = val;
    if (val) {
      loadRecordList();
    }
  }
);

// 监听visible变化，同步父组件
watch(
  () => visible.value,
  (val) => {
    emit("update:modelValue", val);
  }
);

// 处理关闭
const handleClose = () => {
  pagination.value.page = 1;
  recordList.value = [];
};

// 加载记录列表
const loadRecordList = async () => {
  if (!props.keyword) return;

  loading.value = true;
  try {
    const res = await getMessageSensitiveWordList({
      keyWord: props.keyword,
      page: pagination.value.page,
      pageSize: pagination.value.pageSize,
    });
    if (res?.list) {
      recordList.value = res.list.map((item) => ({
        content: item.msg.content,
        fromName: item.msg.fromName,
        fromAvatar: item.msg.fromAvatar,
        fromType: item.msg.fromType,
        fromUserId: item.userInfo?.userId,
        toName: item.msg.toName,
        toAvatar: item.msg.toAvatar,
        toType: item.msg.toType,
        toUserId: item.toUserInfo?.userId,
        createTime: new Date(item.createTime).toLocaleString(),
        msgKey: item.msgKey,
      }));
      pagination.value.total = res.total;
    }
  } catch (error) {
    ElMessage.error("获取敏感词触发记录失败");
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-name {
  margin: 0 8px;
}
</style> 